<template>
	<view class="Reservation">
		<statusBar />
		<!-- 设置 -->
		<view @tap="leftIndex" class="nav f">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>设置-订单设置-预订单设置</view>
		</view>
		<view class="stores">
			<view>
				<view class="f_two">
					<view>休息时间支持预订</view>
					<view><u-switch v-model="checked" @change="change(checked)"></u-switch></view>
				</view>
				<view>休息时间，订单不支持指定时间送达</view>
			</view>
		</view>
		<!-- 预约单支持外卖自提 -->
		<view class="supports f_two">
			<view>预约单支持</view>
			<u-checkbox-group @change="checkboxGroupChange">
				<u-checkbox
					active-color="#35394C"
					shape="square"
					@change="radioChang(item.id)"
					v-model="item.checked"
					v-for="(item, index) in Delivery"
					:key="index"
					:name="item.id"
				>
					{{ item.name }}
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view v-if="this.selected == '' ? false : true">
			<view class="more">
				预订单是指用户下单可指定送达时间的订单。
				<text>了解更多</text>
			</view>

			<!-- 商家接收预定日期 -->
			<view class="reservation f_two" @tap="dataTime">
				<view>商家接收提前预定天数</view>
				<view class="f">
					<view>{{ TimeName }}天</view>
					<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
				</view>
			</view>
			<view class="more">
				跨天订单按照订单送达日结算。
				<text>了解更多</text>
			</view>
			<!-- 预订单提醒时间 -->
			<view class="reservation f_two" @tap="house">
				<view>预订单提醒时间</view>
				<view class="f">
					<view>{{ timesharing }}</view>
					<view><image src="../../components/min-collapse/arrow.png" mode=""></image></view>
				</view>
			</view>

			<!-- 预订单打印时间 -->
			<view class="supports" style="display: inline-block;width: 100%;padding-top: 20upx;">
				<view>预订单打印时间</view>
				<u-radio-group v-model="value">
					<u-radio active-color="#35394C" shape="square" @change="radioChange" v-for="(item, index) in printing" :key="index" :name="item.name" :disabled="item.disabled">
						{{ item.name }}
					</u-radio>
				</u-radio-group>
			</view>

			<view class="Login f_one" @tap="modifies">保存</view>
			<!-- 弹出层 -->
			<u-popup v-model="show" mode="center" length="85%">
				<view class="TimeDate">
					<view>商家接受提前预定天数</view>
					<view>不可隔天选择</view>
					<view>
						<u-radio-group v-model="Time">
							<u-radio
								shape="square"
								:disabled="v.disabled"
								active-color="#35394C"
								@change="checkboxChange(v.day, v.name)"
								v-for="(v, i) in list"
								:key="i"
								:name="v.day"
							>
								{{ v.name }}
							</u-radio>
						</u-radio-group>
					</view>
					<view class="cancel f_six" @tap="open">
						<view>取消</view>
						<view>确定</view>
					</view>
				</view>
			</u-popup>

			<!-- 单选时间 -->
			<u-popup v-model="issShow" mode="center" length="85%">
				<view class="TimeDate">
					<view>预订单提醒时间</view>
					<view>您希望提前多久提醒</view>
					<view>
						<u-radio-group v-model="value">
							<u-radio
								active-color="#35394C"
								shape="square"
								@change="radioChange(item.time, item.name)"
								v-for="(item, index) in choose"
								:key="index"
								:name="item.time"
								:disabled="item.disabled"
							>
								{{ item.name }}
							</u-radio>
						</u-radio-group>
					</view>
					<view @tap="open" class="cancel f_six">
						<view>取消</view>
						<view>确定</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import { toast } from '@/utils/toast';
import request from '@/utils/request';
import statusBar from '../../components/statusBar/statusBar.vue';
import dateTimeUtil from '@/utils/DateFomatUtils';
export default {
	data() {
		return {
			checked: false,
			show: false,
			issShow: false,
			list: [
				{
					name: '当天',
					disabled: false,
					day: '0'
				},
				{
					name: '1天',
					disabled: false,
					day: '1'
				},
				{
					name: '2天',
					disabled: false,
					day: '2'
				},
				{
					name: '3天',
					disabled: false,
					day: '3'
				},
				{
					name: '4天',
					disabled: false,
					day: '4'
				},
				{
					name: '5天',
					disabled: false,
					day: '5'
				},
				{
					name: '6天',
					disabled: false,
					day: '6'
				}
			],
			Time: '0',
			TimeName: '当天',
			choose: [
				{
					name: '15分钟',
					disabled: false,
					time: '15'
				},
				{
					name: '30分钟',
					disabled: false,
					time: '30'
				},
				{
					name: '45分钟',
					disabled: false,
					time: '45'
				},
				{
					name: '1小时',
					disabled: false,
					time: '60'
				},
				{
					name: '1小时15分钟',
					disabled: false,
					time: '75'
				},
				{
					name: '1小时30分钟',
					disabled: false,
					time: '90'
				},
				{
					name: '2小时',
					disabled: false,
					time: '120'
				},
				{
					name: '2小时15分钟',
					disabled: false,
					time: '135'
				},
				{
					name: '2小时30分钟',
					disabled: false,
					time: '150'
				},
				{
					name: '3小时',
					disabled: false,
					time: '180'
				}
			],
			// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			value: '15',
			valueTime: '15分钟',
			restOpen: '2', //开启关闭按钮
			timesharing: '15分钟',
			Delivery: [
				{
					name: '外卖',
					checked: false,
					disabled: false,
					id: '1'
				},
				{
					name: '自提',
					checked: false,
					disabled: false,
					id: '2'
				}
			],
			selected: '',
			printing: [
				{
					name: '提醒时打印',
					checked: false,
					disabled: false,
					id: '1'
				},
				{
					name: '按单时打印',
					checked: false,
					disabled: false,
					id: '2'
				},
				{
					name: '提醒时和接单时均打印',
					checked: false,
					disabled: false,
					id: '3'
				}
			]
		};
	},
	created() {
		this.obtain();
	},
	methods: {
		// 选中某个复选框时，由checkbox时触发
		checkboxGroupChange(e) {
			this.selected = e;
			console.log(this.selected);
		},
		radioChang(e) {
			console.log(e);
		},
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		change(status) {
			if (status == false) {
				this.restOpen = 2;
			} else {
				this.restOpen = 1;
			}
			console.log(this.restOpen, 766666);

			console.log(status, 1111);
		},
		dataTime() {
			this.show = true;
		},
		// 时间
		house() {
			this.issShow = true;
		},
		open() {
			this.show = false;
			this.issShow = false;
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(num, num1) {
			this.Time = num; //day
			this.TimeName = num1; //返回
		},

		// 选中某个单选框时，由radio时触发
		radioChange(num, num1) {
			this.value = num; //time
			this.timesharing = num1;
		},

		// 接口修改
		modifies() {
			uni.showLoading({
				title: '加载中',
				duration: 2000
			});

			request('/merchant/shop/yu-order-set', 'POST', {
				restOpen: this.restOpen,
				day: this.Time,
				remind: this.value
			}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data, 88);
					this.obtain();
					setTimeout(() => {
						uni.hideLoading();
					}, 500);
				}
			});
		},
		// 获取
		obtain() {
			request('/merchant/shop/yu-order-set', 'GET', {}).then(res => {
				if (res.data.code == 1) {
					console.log(res.data, 88);
					this.restOpen = res.data[0].restOpen;
					this.TimeName = res.data[0].day;
					this.valueTime = res.data[0].remind;
					this.timesharing = dateTimeUtil(this.valueTime); //这个是分钟
					console.log(this.timesharing, 8888); //调用时间转换
					console.log(this.restOpen, 6777);
					if (this.restOpen == 2) {
						this.checked = false;
					} else {
						this.checked = true;
					}
					if (this.TimeName == '0') {
						this.TimeName = '当';
					}
				}
			});
		}
	},
	components: {
		statusBar
	}
};
</script>
<style lang="scss" scoped>
.Reservation {
	/deep/.u-checkbox-group {
		display: flex !important;
	}
	/deep/.u-radio-group {
		display: grid;
	}
	/deep/.u-radio {
		line-height: 2.8 !important;
	}
	/deep/.u-checkbox {
		line-height: 3.8 !important;
	}
	/deep/.u-checkbox__label {
		margin-left: 59upx !important;
		font-size: 30upx !important;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1) !important;
	}
	/deep/.u-radio__label {
		margin-left: 59upx !important;
		font-size: 30upx !important;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: rgba(51, 51, 51, 1) !important;
	}
	.nav {
		padding: 50upx 30upx 31upx 30upx;
		background: $bg1-color;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		image {
			width: 27upx;
			height: 30upx;
			display: flex;
		}
		& > view {
			font-size: 34upx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: $bg2-color;
			margin-left: 30upx;
		}
	}
	.supports {
		background: #ffffff;
		padding: 0upx 26upx 0upx 26upx;
		margin-top: 20upx;
	}

	.stores {
		padding-top: 150upx;
		background: #ffffff;
		& > view:nth-child(1) {
			background: $bg1-color;
			padding: 0upx 26upx 24upx 26upx;
			& > view:nth-child(1) {
				& > view:nth-child(1) {
					font-size: 38upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: $bg3-color;
				}
			}
			& > view:nth-child(2) {
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg5-color;
				margin-top: 32upx;
			}
		}
	}
	.more {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg3-color;
		padding: 25upx 55upx 25upx 24upx;
		& > text {
			color: $bg-color;
		}
	}
	.reservation {
		background: $bg1-color;
		padding: 39upx 34upx 39upx 34upx;

		& > view:nth-child(1) {
			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: $bg2-color;
		}
		& > view:nth-child(2) {
			& > view:nth-child(1) {
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: $bg5-color;
				margin-right: 22upx;
			}
			& > view:nth-child(2) {
				image {
					width: 27upx;
					height: 30upx;
					display: flex;
				}
			}
		}
	}
	.TimeDate {
		padding: 48upx 51upx 48upx 51upx;
		& > view:nth-child(1) {
			font-size: 42upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		& > view:nth-child(2) {
			font-size: 26upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: $bg5-color;
			margin-top: 23upx;
		}
		.cancel {
			& > view {
				font-size: 36upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				width: 100upx;
			}
		}
	}
	.Login {
		width: 93%;
		height: 112upx;
		margin: 20upx auto;
		background: rgba(53, 57, 76, 1);
		border-radius: 56upx;
		font-size: 34upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: $bg1-color;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
	}
}
</style>
